<template>
  <div class="padding flex height-100 content-with-tree">
    <div class="left-tree">
      <el-scrollbar style="height: 100%" wrap-style="overflow-x: hidden;">
        <area-tree @node-click="onNodeClick"></area-tree>
      </el-scrollbar>
    </div>
    <div class="flex direction-column height-100 right-content">
      <div class="flex align-center justify-between overview margin-bottom">
        <div class="overview-item" v-for="item in overview" :key="item.label">
          <div class="overview-label">{{ item.label }}</div>
          <p class="overview-content">
            <span class="overview-number" :style="{color: themeColor}">{{ item.count }}</span>
            <span class="overview-unit">{{ item.unit }}</span>
          </p>
        </div>
      </div>
      <div class="button-group">
        <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
      </div>
      <el-table
        class="table" v-loading="loading"
        :data="lists" height="100%"
        :header-cell-style="{
          backgroundColor: themeColor,
          color: 'white'
        }"
      >
        <div slot="empty" class="empty-lists">
          <svg-icon name="search"></svg-icon>
          <span class="empty-text">暂无数据</span>
        </div>
        <el-table-column v-for="column in columns" :key="column.prop" v-bind="column"></el-table-column>
        <el-table-column label="操作" prop="operate" align="center" width="160">
          <template #default="{ row }">
            <td-button icon="editor" title="编辑" @click="edit(row)"></td-button>
            <td-button icon="ashbin" title="删除" icon-style="color: var(--danger-color);border-color: var(--danger-color);" @click="del(row)"></td-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination" layout="total,prev,pager,next"
        hide-on-single-page background
        :current-page.sync="pagination.pageNumber" :page-size="pagination.pageSize"
        :total="pagination.total"
        @current-change="query"
      ></el-pagination>
      <operate-modal ref="modal" :modal-title="modalTitle" :modal-data="modalData" @save-success="reload"></operate-modal>
    </div>
  </div>
</template>

<script>
import AreaTree from '@/components/area-tree'
import TdButton from '@/components/td-button'
import OperateModal from '@/views/energy-saving-management/put-on-records/operate-modal'
import { del, pageEnergyJobFilingList, loadEnergyJobFilingNumber } from '@/api/energyJobFiling'
import { confirmDel } from '@/utils'

const api = {
  del,
  pageEnergyJobFilingList,
  loadEnergyJobFilingNumber,
}
export default {
  name: 'energy-efficiency-analysis-put-on-records',
  components: { AreaTree, TdButton, OperateModal },
  data () {
    return {
      overview: [
        { label: '未备案企业数', count: '0', unit: '家' },
        { label: '能源管理岗位备案数', count: '0', unit: '个' },
        { label: '能源管理备案审核通过企业数', count: '0', unit: '家' },
        { label: '企业平均配备数', count: '0', unit: '人' }
      ],
      loading: false,
      lists: [],
      columns: [
        { label: '企业名称', prop: 'companyName' },
        { label: '所属区域', prop: 'areaName', width: 160 },
        { label: '联系方式', prop: 'contactInformation' },
        { label: '职务', prop: 'positionName' },
        { label: '专业职称', prop: 'professionalTitle' },
        { label: '备案状态', prop: 'filingStatusText' },
      ],
      pagination: {
        pageNumber: 1,
        pageSize: 10,
        total: 0
      },
      areaId: null,
      modalTitle: '',
      modalData: {},
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    }
  },
  mounted () {
    this.loadEnergyJobFilingNumber()
    this.query()
  },
  methods: {
    reload () {
      this.query()
    },
    onNodeClick (data) {
      this.areaId = data.code
      this.pagination.pageNumber = 1
      this.$nextTick(() => {
        this.query()
      })
    },
    loadEnergyJobFilingNumber () {
      return api.loadEnergyJobFilingNumber().then(res => {
        if (res.code === 200) {
          const examinationPassed = (Number(res.data.examinationPassed) || 0).toLocaleString()
          const filingsNumber = (Number(res.data.filingsNumber) || 0).toLocaleString()
          const notFiled = (Number(res.data.notFiled) || 0).toLocaleString()
          this.overview = [
            { label: '未备案企业数', count: notFiled, unit: '家' },
            { label: '能源管理岗位备案数', count: filingsNumber, unit: '个' },
            { label: '能源管理备案审核通过企业数', count: examinationPassed, unit: '家' },
            { label: '企业平均配备数', count: 0, unit: '人' }
          ]
        }
      })
    },
    query () {
      this.loading = true
      let areaId = this.areaId || ''
      areaId = areaId.split('').reverse().join('')
      areaId = areaId.replace(/^0+/g, '')
      areaId = areaId.split('').reverse().join('')
      if (areaId.length % 2 !== 0) {
        areaId += '0'
      }
      const params = {
        pageNumber: this.pagination.pageNumber,
        pageSize: this.pagination.pageSize,
        areaId,
      }
      return api.pageEnergyJobFilingList(params).then(res => {
        if (res.code === 200) {
          res.data.records.forEach((v) => {
            v.filingStatusText = v.filingStatus === '0' ? '是' : '否'
          })
          this.lists = res.data.records
          this.pagination.total = res.data.total
        }
      }).finally(() => {
        this.loading = false
      })
    },
    add () {
      this.modalTitle = '新增信息'
      this.modalData = {
        areaId: this.areaId
      }
      this.$nextTick(() => {
        this.$refs.modal.open()
      })
    },
    edit (row) {
      this.modalTitle = '修改信息'
      this.modalData = {
        ...row
      }
      this.modalData.areaId = this.modalData.areaId || this.areaId
      this.$nextTick(() => {
        this.$refs.modal.open()
      })
    },
    del (row) {
      confirmDel(this).then(() => {
        api.del(row.id).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.reload()
          }
        })
      }).catch(() => {})
    },
  }
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .overview-item {
    background: white;
    border-radius: 4px;
    padding: $gutter;
    height: 118px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    flex: 25%;
    & + & {
      margin-left: $gutter;
    }
  }
  .overview-label {
    font-size: 16px;
    margin-top: $gutter;
  }
  .overview-number {
    font-size: 22px;
    margin-right: 5px;
  }
  .overview-unit {
    color: #777777;
    font-size: 12px;
  }
</style>
